<script setup lang="ts">
    import { ref, watch } from 'vue'
    import  { RouterView,useRoute,useRouter }  from 'vue-router';
    import { Tabbar,TabbarItem } from 'vant';

    const route = useRoute()
    const router = useRouter()
    const active = ref(route.name as string)
    // const active = ref('home')
    watch(active,(newValue,oldValue)=>{
        router.push({
            name:newValue,
        })
    }, {
    deep: true
    })
</script>

<template>
    <!-- <div>{{active}}</div> -->
    <RouterView />
    <Tabbar v-model="active">
        <TabbarItem name="home" icon="home-o">首页</TabbarItem>
        <TabbarItem name="order" icon="bars">订单</TabbarItem>
        <TabbarItem name="me" icon="contact">我的</TabbarItem>
    </Tabbar>

</template>